<!--
<template>
  <div class="start_assess">
    <m-header modile-title="星级评价" go-back="true"></m-header>
    <div class="assess_body">
      <div class="start_box">
        <img v-for="(star,index) in stars" v-bind:src="star.src" @click="rating(index)"  />
      </div>
    </div>
  </div>
</template>

<script>
    import mHeader from '../../../components/header'
    var starOffImg = require('../images/starOff.png')
    var starOnImg = require('../images/starOn.png')
    // https://blog.csdn.net/qq_16371909/article/details/79352348
    export default {
        name: "StartAssess",
        data () {
          return {
            stars: [{
              src: starOffImg,
              active: false
            }, {
              src: starOffImg,
              active: false
            }, {
              src: starOffImg,
              active: false
            },
              {
                src: starOffImg,
                active: false
              }, {
                src: starOffImg,
                active: false
              }
            ],
            starNum: 0 // 表示选中的第几颗
          }
        },
        methods: {
          rating(index){
            var total = this.stars.length // 星星总数
            var idx = index+1 // 表示选中的第几颗星星
            if (this.starNum === 0) { // 没有选中的状态点击事件
              this.starNum = idx // 表示选中后就变成对应选中状态
              for (var i=0; i<idx; i++) {
                this.stars[i].src = starOnImg
                this.stars[i].active = true
              }
            } else {
              // 如果点击已经选中的则为取消当前星级
              if (idx = this.starNum) {
                for (var i=index; i<total;i++) {
                  this.stars[i].src = starOffImg
                  this.stars[i].active = false
                }
              }
              //如果小于当前最高星级，则直接保留当前星级
              // if(idx < this.starNum) {
              //   for(var i = idx; i < this.starNum; i++) {
              //     this.stars[i].src = starOffImg;
              //     this.stars[i].active = false;
              //   }
              // }
              //如果大于当前星级，则直接选到该星级
              if(idx > this.starNum) {
                for(var i = 0; i < idx; i++) {
                  this.stars[i].src = starOnImg;
                  this.stars[i].active = true;
                }
              }
               var count = 0 // 用于统计当前的星星
              for (var i=0;i<total;i++) {
                if (this.stars[i].active) {
                  count++
                }
              }
              this.starNum = count
            }
          }
        },
        components:{
          mHeader
        }
    }
</script>

<style lang="scss" scoped>
.start_assess{
  width: 100%;
  padding-top: 60px;
  .assess_body{
    .start_box{
      display: inline-flex;
      img{
        width: 40px;
      }
    }
  }
}
</style>
-->
<!--<template>
  <div class="start_assess">
    <m-header modile-title="星级评定" go-back="true"></m-header>
       <div class="start_box">
          <div class="star">
             <span>星级评定</span>
             <div class="starXin" v-for="(item,index) in list" :key='index'>
                <div @click="star(index)"><img :src="xing>index?stara:starb"/></div>
             </div>
          </div>
          <textarea placeholder="请输入备评价"></textarea>
          <button class="te">评价</button>
        </div>
  </div>
</template>

<script>
  import mHeader from '../../../components/header'
  export default {
    name: "",
    data() {
      return {
        list:[0,1,2,3,4],
        stara: require('../images/starOn.png'),//亮星星
        starb: require('../images/starOff.png'),//暗星星
        xing:0
      }
    },
    //方法
    methods: {
      star(val){
        this.xing = val+1
        console.log("点击了"+(val+1)+"颗星")
      }
    },
    components: {
      mHeader
    }
  }
</script>

<style lang="scss" scoped>
.start_assess{
  width: 100%;
  padding-top: 60px;
  .start_box{
    .star{
      width: 90%;
      height: auto;
      margin: 0 auto;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-top: 40px;
      margin-bottom: 40px;
      span{
        width: 21%;
        height: auto;
        font-size: 15px;
        font-weight: 500;
        color: rgba(51,51,51,1);
      }
      .starXin{
        height: auto;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        line-height: 20px;
        div{
          margin-left: 15px;
          img{
            width: 30px;
            height: 30px;
          }
        }
      }
    }
    textarea{
      width: 85%;
      margin: 0 auto;
      height: 120px;
      background: rgba(246,246,246,1);
      border-radius: 6px;
      font-size: 15px;
      font-weight: 400;
      color: rgba(153,153,153,1);
      line-height: 21px;
      padding: 9px 15px 0 15px;
    }
    .te{
      margin-top: 43px;
      width: 74%;
      height: 43px;
      background: rgba(67,154,255,1);
      border-radius: 4px;
      font-size: 15px;
      font-weight: 400;
      color: rgba(254,254,254,1);
    }
  }
}
</style>-->
<!--<template>
  <div>
    <m-header modile-title="星级评定" go-back="true"></m-header>
    <div class="mask">
      <div class="pop"></div>
      <div class="box center_box">
        <p class="center title">评价</p>
        <div style="margin: 23px 0 30px;">
          <span v-for="(item, index) in star" :key=index class="s" :class="{'active':index <= s_l}" @click="getStar(index)"></span>
          <span class="s5 fr">服务质量：</span>
        </div>
        <textarea placeholder="请输入对此服务的评价" v-model="content"></textarea>
      </div>
    </div>
  </div>
</template>
<script>
  import mHeader from '../../../components/header'
  export default {
    data() {
      return {
      score: 0,
      content: '',
      star: [0,1,2,3,4],
      s_l: -1,
      old_index: null, // 选中存放值
      }
    },
    computed: {

    },
    methods: {
      getStar(index)  {
        if (this.old_index == index) { // 取消星星
          this.s_l = index - 1;
          this.score&#45;&#45;;
          this.old_index&#45;&#45;;
          return
        }
        // 点击增加星星
        this.s_l = index;
        this.score = index+1;
        this.old_index = index;
        console.log(this.score)
      }
    },
    components: {
      mHeader
    }
  }
</script>
<style lang='scss' scoped>
  .fr {
    float: left;
  }
  .center {
    text-align: center;
  }
  .center_box {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
  }
  .mask {
    .pop {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: #000;
      opacity: 0.3;
    }

    .box {
      color: #333;
      background: #fff;
      padding: 27px 70px;
      border-radius: 20px;

      .title {
        font-size: 24px;
      }

      .s {
        display: inline-block;
        width: 35px;
        height: 35px;
        margin-right: 10px;
        background: url('') no-repeat center center;
        background-size: cover;
        cursor: pointer;
        &.active {
          background-image: url('');
        }
      }
      .s5 {
        font-size: 24px;

      }
      textarea {
        width: 370px;
        height: 140px;
        padding: 19px;
        border: 1px solid #cccccc;
        border-radius: 20px;
      }
    }
  }

</style>-->
<!--<template>
  <div>
    <m-header modile-title="星级评定" go-back="true"></m-header>
    <div class="star-box">
      <div class="small_box" v-for="(num,index) in 5" :key="index" @click="handle(index)">
        <img :src='data>=index?ling:bu' alt="">
      </div>
    </div>
  </div>
</template>
<script>
  import mHeader from '../../../components/header'
  var img = require('../images/starOn.png')
  var imgB = require('../images/starOff.png')
  export default {
    data() {
      return {
        data:-1,
        bu:imgB,
        ling:img,
        choceStar: ''
      }
    },
    computed: {

    },
    methods: {
      handle(val){
        this.data = -1
        this.data = val
        this.choceStar = val+1
        console.log('星星数：' + this.choceStar)
      }
    },
    components: {
      mHeader
    }
  }
</script>
<style lang='scss' scoped>
  .star-box{
    display: inline-flex;
    align-items: center;
    padding-top: 60px;
    .small_box{
      img{
        width: 30px;
        height: 30px;
      }
    }
  }
</style>-->
<template>
  <div class="start_assess">
    <m-header modile-title="星级评定" go-back="true"></m-header>
    <div class="main_body">
      <lz-roating-bar :i-score.sync="score" />
      <div>当前评分为: {{ score }}</div>
    </div>
  </div>
</template>
<script>
  import mHeader from '../../../components/header'
  import LzRoatingBar from '../../../components/start'
  export default {
    data() {
      return {
        score: -1,
      }
    },
    computed:{

    },

    methods: {

    },
    components: {
      mHeader,
      LzRoatingBar
    }
  }
</script>
<style lang='scss' scoped>
.start_assess{
  padding-top: 60px;
}
</style>
